<template>
<el-container class="con-home">
  <el-header>
      <a @click="outlogin()">退出登录</a>
    </el-header>
  <el-container>
    <el-aside width="200px">
           <!-- 侧边栏菜单 -->
          <el-menu
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :unique-opened="true"
            :collapse-transition="false"
            :collapse="showMenu"
            router
            :default-active="$route.path"
            >
            <!-- 一级菜单,注意index的值为字符串类型,否则报错 -->
                 <el-submenu :index="item.order+''" v-for="(item) in menulist" :key="item.id">
              <!-- 一级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
               <i :class="classobj[item.id]"></i>
                <!-- 文本 -->
                <span>{{item.authName}}</span>
              </template>
              <!-- 二级子菜单 -->
              <el-menu-item :index="'/home/'+value.path"  v-for="(value) in item.children" :key="value.id">
                <!-- 二级菜单模板 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-menu"></i>
                  <!-- 文本 -->
                  <span>{{value.authName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>


    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
      <el-footer></el-footer>
</el-container>
</template>


<script>
export default {
  name: "home",
  data(){
      return{
          menulist:[],
           // 一级菜单图标
          classobj:{
            "125":"iconfont icon-user",
            "103":"iconfont icon-3702mima",
            "101":"iconfont icon-shangpin",
            "102":"iconfont icon-danju",
            "145":"iconfont icon-baobiao",
          },
          //控制菜单折叠状态
          showMenu:false
      }
  },
  methods: {
    // 实现登出功能
    outlogin() {
      // 清空sessionStorage中所有的数据
      window.sessionStorage.clear();
      //跳转到登录组件(使用replace跳转路由时,路由信息不会被保存在历史对象中)
      this.$router.replace("/login");
    },
    // 查询所有菜单列表
    async getmenus(){
        // 发送数据请求
        let rst=await this.$http.get("menus");
        // 判断是否为成功的状态码,如果失败则提示错误信息
        if(rst.meta.status!=200){
            this.$message.error("数据获取失败")
        }else{
        // 当请求成功时就将data的值赋值给menulist
        this.menulist=rst.data;
        }
    },
    //动态改变菜单收起状态的方法
    collfn(){
      this.showMenu=!this.showMenu;
    }
  },
  mounted(){
      this.getmenus();
  }
};
</script>

<style scoped>
.con-home{
    height: 100%;
}
.el-header{
    background-color: #373d41;
}
.el-header a{
  line-height: 60px;
  color: white;
  cursor: pointer;
  float: right;
}
.el-aside{
    background-color: #333744;
}
.el-main{
    background-color: #eaedf1;
}
.controllerMen{
  width: 100%;
  height: 20px;
  background-color: #485164; /*背景颜色*/
  color: white; /*字体颜色*/
  display: flex; /*开启弹性*/
  justify-content: center; /*主轴对齐方式*/
  align-items: center; /*辅轴对齐方式*/
  cursor: pointer;  /*鼠标样式*/
  letter-spacing: 0.2em; /*字符间距*/
}

</style>
